<template>
  <editor-layout class="rule-edit" @ok="handleOk" v-on="$listeners" v-loading="loading" :loading="saveLoading">
    <div class="codemirror">
      <!-- //自定义高级规则？ -->
      <monaco-editor
        v-model.trim="currValue"
        language="javascript"
        style="height: 550px"
      />
    </div>
    <template v-slot:footer>
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button type="warning" size="small" @click="handleTest">测试</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="handleOk">保存</el-button>
    </template>
  </editor-layout>
</template>

<script>

import monacoEditor from '@/components/common/monaco/monaco-editor'

export default {
  name: 'rule-edit',
  components: {
    monacoEditor
  },
  props: {
    value: String,
    data: Object
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      currValue: this.value
    }
  },
  methods: {
    async init() {

    },
    handleCancel() {
       this.$emit('cancel')
    },
    handleTest() {
      const param = {...this.data}
      param.validationRules = this.currValue
      console.info(param)
    },
    handleOk() {

    }
  },
  mounted() {
    this.init()
  }
}
</script>
